<template>
	<view class="list">
		<view class="header" v-if="isheader">
			<image mode="aspectFill" src="@/static/img/add-icon.png" class="add-icon" @click="toPage"></image>
			<span>{{title}}</span>
			<view class="search">
				<image mode="scaleToFill" src="@/static/img/search.png"></image>
				<input type="text" placeholder="姓名" placeholder-style="color:#fff" v-model="name" @focus="nameInput('first')" @confirm="nameInput">
			</view>
			<view class="selectBox" v-if="screenArr.length > 0">
				<view class="uni-list">
					<view  @click="[$emit('comSearch','all'),screenArr = [],name='']">全部</view>
					<view  v-for="(item, index) in screenArr" :key="item.value" @click="[$emit('comSearch',item),screenArr = [],name=item.realName]">{{item.realName}}</view>
				</view>
			</view>
		</view>
		<template v-if="list">
			<uni-swipe-action v-if="list.length > 0">
				<view class="content">
					<view class="list-item" v-for="(item,index) in list" :key="index" >
						<uni-swipe-action-item :right-options="options"  @click="bindClick(item)">
							<view class="list-item-left" :style="{background:randomRgbaColor(index)}" @click="jump(item)" v-if="item.sources == 1">{{item.realName ? item.realName : item.userName ? item.userName : item.memberNmae}}</view>
							<view class="list-item-left" :style="{background:randomRgbaColor(index)}" @click="jump(item)" v-if="item.sources == 3">{{item.realName ? item.realName : item.signName}}</view>
							<view class="list-item-left" :style="{background:randomRgbaColor(index)}" @click="jump(item)" v-if="!item.sources">{{item.memberNmae ? item.memberNmae : item.userName ? item.userName : item.realName}}</view>
							<view class="list-item-right">
								<view class="info" @click="jump(item)">
									<p>{{item.listtitle ?item.listtitle : listtitle}}</p>
									<p v-for="(label,labelindex) in listLabel" :key="labelindex">{{label.name}}{{item.status == 1 ? '未签发' : item[label.key]}}</p>
								</view>
								<view>
									<span :class="['status',!item.status || item.status == 1?'not-active':'active']">{{!item.status || item.status == 1?'未签发':'已签发'}}</span>
									<span v-if="rBtn.show && item.status == 2" :class="['btn',item.url?'has':'none']" @click="$emit('btnclick',item)">{{item.url?rBtn.title:'等待生成'}}</span>
								</view>
							</view>
						</uni-swipe-action-item>
					</view>
				</view>
			</uni-swipe-action>
			<view class="nulldata" style="text-align: center;font-size: 26upx;color: #ccc;padding-bottom: 20upx;" v-if="nullData">
				<view>没有更多数据了</view>
			</view>
			<view class="noneChating" v-if="list.length <= 0">
				<image src="@/static/img/headFeature/chattingNone.png"></image>
				<view>暂无数据</view>
			</view>
		</template>
	</view>
</template>
<script>
	export default {
		props:{
			list:null,
			title:{
				type: String,
				default: ''
			},
			listtitle:{
				type: String,
				default: ''
			},
			// 右滑操作
			options:{
				type: Array,
				default: function(){
					return []
				}
			},
			listLabel:{
				type: Array,
				default: function(){
					return []
				}
			},
			addpageUrl:{
				type: String,
				default: ''
			},
			isheader:{
				type: Boolean,
				default : true
			},
			nullData:{
				type: Boolean,
				default : true
			},
			sources: {
				type: String,
				default: ''
			},
			rBtn:{
				type: Object,
				default: function(){
					return {}
				}
			}
		},
		data() {
			return {
				name:'',
				current:'',
				screenArr:[]
			};
		},
		mounted() {
			
		},
		methods:{
			nameInput(e){
				const data =  {str:e == 'first'?'':e.detail.value}
				this.$api.selectMembershipList(data).then((res) => {
					if(res.data.returnCode == 200) {
						this.screenArr = res.data.result.list;
					}
				})
			},
			randomRgbaColor(index) {
				var textcolor = ['#04D68F','#FF9869','#7079EA','#D17BE5'];
				var b = ''
				if(index >= 4){
					b = textcolor[index%4]; 
				}else{
					b = textcolor[index]; 
				}
				return b; //返回rgba(r,g,b,a)格式颜色
			},
			toPage(){
				uni.navigateTo({
					url:this.addpageUrl
				})
			},
			bindClick(item){
				this.$emit('bindClick',item)
			},
			jump(item){
				this.$emit('jump',item)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		.content{
			padding-top: 132upx;
		}
		.header{
			width: 100vw;
			padding:22upx 24upx 26upx;
			background: #38CB97;
			display: flex;
			align-items: center;
			position: fixed;
			top:88upx;
			z-index: 10;
			.add-icon{
				width: 82upx;
				height: 82upx;
				margin-right: 36upx;
			}
			span{
				flex:1;
				font-size: 36upx;
				color: #fff;
			}
			.search{
				position: relative;
				width: 168upx;
				height: 48upx;
				background: rgba(255,255,255,.25);
				display: flex;
				align-items: center;
				image{
					width: 22upx;
					height: 22upx;
					margin-left: 17upx;
					margin-right: 13upx;
				}
				input{
					font-size: 22upx;
					flex:1;
					height: 48upx;
					color: #fff;
				}
			}
			.selectBox {
				position: absolute;
				right: 20upx;
				top: 88upx;
				width: 88px;
				max-height: 564rpx;
				z-index: 10;
				background: #fff;
				box-shadow:0px 0px 20rpx -2rpx #bdbdbd;
				border-radius: 8upx;
				view{
					padding:4rpx 10rpx;
					overflow: hidden;
					font-size: 26upx;
					line-height: 48rpx;
				}
				.uni-list-cell {
					display: flex;
				}
			}
		}
		min-height: 100vh;
		background: #f8f8f8;
		&-item{
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 24upx;
			background: #fff;
			.uni-swipe{
				width: 100%;
			}
			&-left{
				margin-left: 24upx;
				margin-top: 63upx;
				width: 100upx;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				color: #fff;
				margin-right:38upx;
				border-radius: 8upx;
				font-size: 26upx;
			}
			&-right{
				margin-right: 24upx;
				flex:1;
				display: flex;
				padding:37upx 0 46upx 0;
				.info{
					flex:1;
					p:nth-child(1) {
						font-weight: bold;
					}
					p{
						margin-top: 8upx;
						max-width: 486upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.status{
					font-size: 26upx;
					&.not-active{
						color: #1A85E9;
					}
					&.active{
						color: #38CB97;
					}
				}
			}
		}
	}
	.noneChating {
		padding-top: 228upx;
		image {
			display: block;
			margin: 0 auto;
			width: 260upx;
			height: 154upx;
		}
		view {
			margin: 24px auto;
			text-align: center;
			color: #333333;
			font-size: 13px;
		}
	}
	/deep/ .list-item-right{
		view:nth-of-type(2){
			text-align: center;
		}
		// display: unset;
		.info{
			width: 300rpx;
		}
		.status{
			flex:1;
		}
		.btn{
			margin-top: 30rpx;
			display: block;
			width: 132rpx;
			height: 48rpx;
			border-radius: 6rpx;
			color: #fff;
			text-align: center;
			line-height: 48rpx;
			font-weight: normal;
			margin-top: 42rpx;
			&.has{
				background: #38CB97;
			}
			&.none{
				background: #ccc;
			}
		}
	}
</style>
